<template>
  <div  class="set" :class="{'English':languageData.id == 'English','vip':pifuDataFn !=1}">
    <div class="imgUser">
        <img :src="user.imgUlr"/>
    </div>
    <div class="name"><p>{{user.name}}</p></div>
    <div class="nav">
      <div v-show="user.type == 0" class="navBox" :class="{'check':checktext=='AdminConfig'}" v-on:click="goDavise('AdminConfig')">
        <div class="navText clearfix">
          <div class="imgBox left">
            <img :src="userImgIcon"/>
          </div>
          <div class="left"> <p> {{languageData.admin.userAdmin}}</p> </div>
          <div class="cleae"></div>
        </div>
      </div>
      <div v-show="user.type == 0" class="navBox" :class="{'check':checktext=='adminAddUser'}" v-on:click="goDavise('adminAddUser')">
        <div class="navText clearfix">
          <div class="imgBox left">
            <img :src="userImgAad"/>
          </div>
          <div class="left"><p>{{languageData.admin.adduser}} </p>  </div>
          <div class="cleae"></div>
        </div>
      </div>
      <div v-show="user.type == 0" class="navBox" :class="{'check':checktext=='adminAnanysist'}" v-on:click="goDavise('adminAnanysist')">
        <div class="navText clearfix">
          <div class="imgBox left">
            <img :src="tjfx"/>
          </div>
          <div class="left"><p>{{languageData.admin.analysis}} </p>  </div>
          <div class="cleae"></div>
        </div>
      </div>
      <!--<div v-show="user.type == 1" class="navBox" :class="{'check':checktext=='adminDavise'}" v-on:click="goDavise('adminDavise')">-->
        <!--<div class="navText clearfix">-->
          <!--<div class="imgBox left">-->
            <!--<img :src="devisIcon"/>-->
          <!--</div>-->
          <!--<div class="left"><p>{{languageData.admin.deviceAdmin}} </p>  </div>-->
          <!--<div class="cleae"></div>-->
        <!--</div>-->
      <!--</div>-->
      <div v-show="user.type == 1" class="navBox" :class="{'check':checktext=='cityConfig'}" v-on:click="goDavise('cityConfig')">
        <div class="navText clearfix">
          <div class="imgBox left">
            <img :src="userImgAad"/>
          </div>
          <div class="left"><p>{{languageData.admin.changepassword}}</p></div>
          <div class="cleae"></div>
        </div>
      </div>
      <div v-show="user.type == 1" class="navBox" :class="{'check':checktext=='adminChart'}" v-on:click="goDavise('adminChart')">
        <div class="navText clearfix">
          <div class="imgBox left ">
            <span class="el-icon-tickets" style="font-size: 20px"></span>
            <!--<img :src="userImgAad"/>-->
          </div>
          <div class="left"><p>{{languageData.admin.orderstatistics}} </p></div>
          <div class="cleae"></div>
        </div>
      </div>
    </div>
    <div class="clearfix eit" style="">
      <div class="left " ><span class="el-icon-service"> </span><span style="padding-left: 5px;">{{languageData.header.Contact}} </span></div>
      <div class="right "v-show="user.type == 0"><span class="el-icon-back"> </span><span style="padding-left: 5px;" v-on:click="loginOut()">{{languageData.header.Exit}}</span></div>
      <div class="right "v-show="user.type == 1"><span class="el-icon-back"> </span><span style="padding-left: 5px;" v-on:click="loginOut(1)">{{languageData.header.back}}</span></div>
    </div>
  </div>
</template>
<style scoped>
  .set{padding-top: 85px;max-width: 230px;height: 100%;position: relative;background-color: #fff}
  .vip{background-color: #1d2739 }
 .imgUser{width: 73px;height: 73px;border-radius:40px;box-shadow:0 0 16px #e2e7ea; margin: auto;margin-bottom: 15px;overflow: hidden}
 .imgUser img {max-width: 100%}
 p{text-align: center;font-size: 14px;}
 .nav{ padding-top:70px;}
 .navText{ width: 120px;margin: auto;font-size:14px;color: #656565;line-height: 28px;}
 .navBox{width: 100%;margin-top: 20px;height: 28px;cursor: pointer;margin-left: 4px}
 .check{ width: 100%;margin-top: 20px;height: 28px;border-left: 4px solid #0d71b7; margin-left: 0px;color: #0d71b7}
  .check p{ color: #0d71b7}
 .check .navText{ color: #0d71b7;}
 .imgBox{width: 26px;height:26px;margin-right: 10px;}
  .eit{position: absolute;bottom:120px;left: 20px;width: 160px;margin: auto}
  .eit span{font-size: 12px;cursor: pointer}
  .English .navText{width: 182px}
  .vip { background: #1d2739}
</style>
<script>
  import { mapState, mapActions } from 'vuex'
  import HeaderPublc from './herder.vue'
  import Public from '../../vuex/public.js'
  import UserImgIcon_sel from '../../../static/img/icon/icon_yhgl_sel.png'
  import UserImgIcon from '../../../static/img/icon/icon_yhgl_nor.png'
  import DevisIcon from '../../../static/img/icon/icon_sbgl_nor.png'
  import DevisIcon_sel from '../../../static/img/icon/icon_sbgl_sel.png'
  import UserImg from '../../../static/img/icon/userDeFilt.png'
  import UserImgAad from '../../../static/img/icon/icon_cjyh_nor.png'
  import UserImgAad_sel from '../../../static/img/icon/icon_cjyh_sel.png'
  import CityImgAdd from '../../../static/img/icon/icon_cssz_nor.png'
  import CityImgAdd_sel from '../../../static/img/icon/icon_cssz_sel.png'
  import tjfx from '../../../static/img/icon/icon_tjfx_nor.png'
  import tjfx_sel from '../../../static/img/icon/icon_tjfx_sel.png'
  export default {
    name: 'my-set',
    created () {
      // 查看本页面路由 绑定对应页面class
      this.checktext  = this.$route.name
      var usr = sessionStorage.getItem('user')

      if(usr) {
        usr = JSON.parse(usr)
        if(!usr.userId){
          this.$router.push({ name: 'login' })
          return
        }
        if(usr.type == 1 && this.checktext == 'AdminConfig'){
          this.$router.push({ name: 'adminDavise' })
        }
        if(usr.type == 1 && this.checktext == 'adminAddUser'){
          this.$router.push({ name: 'adminDavise' })
        }
        if(usr.type == 1 && this.checktext == 'adminAnanysist'){
          this.$router.push({ name: 'adminDavise' })
        }
        if(usr.type == 1 && this.checktext == 'davisAnanysist'){
          this.$router.push({ name: 'adminDavise' })
        }

        if(usr.type == 0 && this.checktext == 'adminDavise'){
          this.$router.push({ name: 'AdminConfig' })
        }
        if(usr.type == 0 && this.checktext == 'cityConfig'){

          this.$router.push({ name: 'AdminConfig' })
        }
        this.user.name = usr.userName
        this.user.type = usr.type
        this.user.userId = usr.userId
      }else {
        this.$router.push({ name: 'login' })
      }
      if(this.checktext == 'AdminConfig'){
         this.userImgIcon = UserImgIcon_sel
      }
      if(this.checktext == 'adminDavise'){
        this.devisIcon = DevisIcon_sel
      }
      if(this.checktext == 'adminAddUser'){
        this.userImgAad = UserImgAad_sel
      }
      if(this.checktext == 'cityConfig'){
        this.cityImgAdd = CityImgAdd_sel
      }
      if(this.checktext == 'adminAnanysist'){
        this.tjfx = tjfx_sel
      }
    },
    data () {
      return {
        user: {
          imgUlr: UserImg, // 账号图片
          name: '小明管理员',
          type:null,
          userId: null
        },
        userImgIcon: UserImgIcon,
        devisIcon: DevisIcon,
        cityImgAdd: CityImgAdd,
        userImgAad: UserImgAad,
        tjfx:tjfx,
        // this.check
        checktext: null,
        remember: false, // 是否记住密码
        error: false, // 登陆是否成功
        defaultLayers: null,
        ui: null,
        list: [],
        bubble: null,
        routeInstructionsContainer: null,
        input: null,
      }
    },
    methods: {
      ...mapActions({
        lognOutPost: 'loginOutFn'
      }),
      login () {
        this.$router.push({ name: "map" })
      },

      goDavise (tex) {
        this.$router.push({ name: tex })
      },
      // 退出登陆
      loginOut (id) {
       // this.show2 = !this.show2
        if(id){
          this.$router.push({ name: 'chart' })
        }else {
          var parm = {
            userId: this.user.id
          }
          this.lognOutPost(parm)
          Public.publicLo.sessionStorageSav('token', '')
          Public.publicLo.sessionStorageSav('user', '')
          // 清空所有数据
          this.$store.commit('loginOut', null)
          this.$router.push({ name: 'login' })
        }
        }
    },
    computed: {
      languageData: function () {
        var parm = this.language
        if (parm) {

          if (parm.check == 'Chinese') {
            parm = parm.Chinese
          }
          if (parm.check == 'English') {
            parm = parm.English
//            dom.style = 'width:620px'
          }
//
//          // 替换 其他交互数据
//          this.updateDate(parm)
        }
        return parm
      },
      updateStatusData: function () {
        var parm = this.updateStatus
        if (parm == 'out') {
          // 没记住密码保存空 localStorage
          Public.publicLo.sessionStorageSav('token', '')
          Public.publicLo.sessionStorageSav('user', '')
          // 清空所有数据
          this.$store.commit('loginOut', null)
          this.$router.push({ name: 'login' })
          // this.lognOutPost(this.user)
        } else if (parm == 'outErorr') {
          Public.publicLo.sessionStorageSav('token', '')
          Public.publicLo.sessionStorageSav('user', '')
          // 清空所有数据
          this.$store.commit('loginOut', null)
          this.$router.push({ name: 'login' })
        }
        return 1
      },
      pifuDataFn: function (){
        var parm = this.pifuData
        return parm
      },
      ...mapState([
        'nav',
        'language',
        'updateStatus',
        'pifuData'
      ])
    },
    mounted () {
      // 配置顶部菜单

    },
    components: {
       HeaderPublc: HeaderPublc
    }
  }
</script>

